<template>
  <div class="scrollable-tabs">
    <!-- 左滚动按钮 -->
    <button
      v-if="showScrollButtons"
      class="scroll-button scroll-button-left"
      :class="{ disabled: !canScrollLeft }"
      @click="scrollLeft"
      :disabled="!canScrollLeft"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="currentColor"
      >
        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
      </svg>
    </button>

    <!-- 标签容器 -->
    <div
      ref="tabsContainer"
      class="tabs-container"
      @scroll="handleScroll"
    >
      <div
        ref="tabsWrapper"
        class="tabs-wrapper"
      >
        <!-- 标签项 -->
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab-item"
          :class="{ active: index === activeIndex }"
          @click="selectTab(index)"
        >
          <slot
            name="tab"
            :tab="tab"
            :index="index"
          >
            {{ tab }}
          </slot>
        </div>
      </div>
    </div>

    <!-- 右滚动按钮 -->
    <button
      v-if="showScrollButtons"
      class="scroll-button scroll-button-right"
      :class="{ disabled: !canScrollRight }"
      @click="scrollRight"
      :disabled="!canScrollRight"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="currentColor"
      >
        <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
      </svg>
    </button>
  </div>
</template>

<script>
export default {
  name: 'ScrollableTabs',

  props: {
    // 标签数据
    tabs: {
      type: Array,
      default: () => []
    },
    // 最大可见标签数量
    maxVisibleTabs: {
      type: Number,
      default: 5
    },
    // 当前激活的标签索引
    value: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      activeIndex: this.value,
      canScrollLeft: false,
      canScrollRight: false,
      scrollPosition: 0
    }
  },

  computed: {
    // 是否显示滚动按钮
    showScrollButtons() {
      return this.tabs.length > this.maxVisibleTabs
    },

    // 每个标签的预估宽度
    tabWidth() {
      return 120 // 根据实际样式调整
    }
  },

  watch: {
    value(newVal) {
      this.activeIndex = newVal
      this.$nextTick(() => {
        this.scrollToActiveTab()
      })
    },

    activeIndex(newVal) {
      this.$emit('input', newVal)
      this.$emit('change', newVal)
      this.$nextTick(() => {
        this.scrollToActiveTab()
      })
    },

    tabs() {
      this.$nextTick(() => {
        this.checkScrollability()
      })
    }
  },

  mounted() {
    this.checkScrollability()
    window.addEventListener('resize', this.checkScrollability)
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.checkScrollability)
  },

  methods: {
    // 选择标签
    selectTab(index) {
      this.activeIndex = index
      this.$emit('tab-click', index)
    },

    // 向左滚动
    scrollLeft() {
      if (this.canScrollLeft) {
        const container = this.$refs.tabsContainer
        const scrollAmount = this.tabWidth * 2 // 每次滚动2个标签的宽度
        container.scrollLeft -= scrollAmount
      }
    },

    // 向右滚动
    scrollRight() {
      if (this.canScrollRight) {
        const container = this.$refs.tabsContainer
        const scrollAmount = this.tabWidth * 2 // 每次滚动2个标签的宽度
        container.scrollLeft += scrollAmount
      }
    },

    // 滚动到激活的标签
    scrollToActiveTab() {
      const container = this.$refs.tabsContainer
      const activeTab = container.querySelector('.tab-item.active')

      if (activeTab) {
        const tabRect = activeTab.getBoundingClientRect()
        const containerRect = container.getBoundingClientRect()

        if (tabRect.left < containerRect.left) {
          // 标签在可视区域左侧
          container.scrollLeft -= containerRect.left - tabRect.left
        } else if (tabRect.right > containerRect.right) {
          // 标签在可视区域右侧
          container.scrollLeft += tabRect.right - containerRect.right
        }
      }
    },

    // 处理滚动事件
    handleScroll() {
      const container = this.$refs.tabsContainer
      this.scrollPosition = container.scrollLeft
      this.checkScrollability()
    },

    // 检查是否可以滚动
    checkScrollability() {
      const container = this.$refs.tabsContainer
      if (!container) return

      this.canScrollLeft = container.scrollLeft > 0
      this.canScrollRight =
        container.scrollLeft < container.scrollWidth - container.clientWidth - 1
    }
  }
}
</script>

<style scoped>
.scrollable-tabs {
  display: flex;
  align-items: center;
  position: relative;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.tabs-container {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.tabs-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.tabs-wrapper {
  display: flex;
  min-width: min-content;
}

.tab-item {
  flex: 0 0 auto;
  padding: 12px 24px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
  user-select: none;
}

.tab-item:hover {
  background-color: #f5f5f5;
}

.tab-item.active {
  border-bottom-color: #008c93;
  color: #008c93;
  font-weight: 500;
}

.scroll-button {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.3s ease;
  margin: 0 4px;
}

.scroll-button:hover:not(.disabled) {
  background-color: #f0f0f0;
  color: #333;
}

.scroll-button.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.scroll-button-left {
  order: -1;
}

.scroll-button-right {
  order: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .tab-item {
    padding: 10px 16px;
    min-width: 70px;
  }

  .scroll-button {
    width: 28px;
    height: 28px;
  }
}
</style>